<template>
  <div class="info">
    <div class="head">
      <div>{{titleName}}</div>
    </div>
    <div class="block">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="150px">
        <el-form-item label="角色名称" prop="remark">
          <el-input style="width:250px" placeholder="输入账号使用角色，不超过20个字" v-model="form.remark" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="登陆账号" prop="mobile">
          <el-input style="width:250px" v-model="form.mobile" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!edit">
          <el-input style="width:250px" type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass" v-if="!edit">
          <el-input style="width:250px" type="password" v-model="form.checkPass"></el-input>
        </el-form-item>
        <el-form-item label="账号权限" prop="check">
          <el-checkbox-group v-model="form.checkList">
            <el-checkbox v-for="(item, index) in routeLists" :label="index" :key="index">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button type="primary" @click="btnSave">保存</el-button>
      <el-button @click="goback">取消</el-button>
    </div>
  </div>
</template>
<script>
import common from 'src/util/common'
import { addRole, modifyRole, getRoleDetail } from 'api/common/index'
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateCheck = (rule, value, callback) => {
      if (!this.form.checkList.length) {
        callback(new Error('请至少选择一个权限项'))
      } else {
        callback()
      }
    }
    return {
      edit: false, // 是否是编辑模式
      titleName: '',
      id: Number(common.params('id')),
      routeLists: [{
        name: '首页', routeName: 'index'
      }, {
        name: '缴费管理', routeName: 'payProject'
      }, {
        name: '学生管理', routeName: 'studentManage'
      }, {
        name: '结算报表', routeName: 'settlement'
      }, {
        name: '设置', routeName: 'basicSet'
      }],
      form: {
        password: '',
        checkPass: '',
        mobile: '',
        remark: '',
        checkList: []
      },
      rules: {
        remark: [{message: '必填项', trigger: 'blur', required: true}],
        mobile: [{required: true}],
        password: [{validator: validatePass, trigger: 'blur', required: true}],
        checkPass: [{validator: validatePass2, trigger: 'blur', required: true}],
        check: [{validator: validateCheck, trigger: 'change', required: true}]
      } // 表单校验规则
    }
  },
  async created () {
    if (this.$route.name === 'addManager') {
      this.titleName = '添加管理员'
      this.form.mobile = common.params('account')
    } else {
      let res = await getRoleDetail({id: this.id})
      this.form.remark = res.data.remark
      this.form.mobile = res.data.mobile
      this.form.checkList = []
      let netMenu = res.data.nets[0].netMenu
      this.routeLists.forEach((item, index) => {
        netMenu.forEach(obj => {
          if (item.routeName === obj.routeName) {
            this.form.checkList.push(index)
          }
        })
      })
      this.titleName = '编辑管理员'
      this.edit = true
    }
  },
  methods: {
    btnSave (index) { // 保存
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let msg = '添加成功'
          let netMenu = []
          this.form.checkList.sort((per, next) => { // 重新排序，默认取第一个权限路由
            return per - next
          })
          this.form.checkList.forEach(item => {
            netMenu.push(this.routeLists[item])
          })
          let params = {
            remark: this.form.remark,
            password: this.edit ? undefined : this.form.password,
            mobile: this.form.mobile,
            netMenu: netMenu,
            checkList: this.form.checkList
          }
          if (!this.edit) {
            await addRole(params)
          } else {
            await modifyRole({ ...params, id: this.id })
            msg = '修改成功'
          }
          this.$message({
            message: msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.$router.go(-1)
            }
          })
        }
      })
    },
    goback () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
  .info {
    padding-left: 20px;
    font-size: 14px;
    .head {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #bfcbd9;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }
  }
</style>

